<template>
  <div class="page-view">
    <van-field
      v-model="oldPwd"
      placeholder="请输入原始密码"
      class="form"
      type="password"
    />
    <van-field
      v-model="newPwd"
      class="form"
      placeholder="请输入新密码"
      type="password"
    />
    <div class="btn-div">
      <van-button
        type="primary"
        class="btn"
        @click="onSubmit"
      >
        确定
      </van-button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      oldPwd: '',
      newPwd: '',
    }
  },
  methods: {
    // 验证
    isValidatePwd () {
      if (this.oldPwd === '') {
        this.$toast('请输入原始密码！')
        return false
      }
      if (this.newPwd === '') {
        this.$toast('请输入新密码！')
        return false
      } else {
        return true
      }
    },
    // 提交
    onSubmit () {
      if (this.isValidatePwd()) {
        this.$axios({
          url: 'user/UpdatePassword',
          data: {
            OldPassword: this.oldPwd,
            NewPassword: this.newPwd,
          },
        }).then(() => {
          this.$router.back()
          setTimeout(() => {
            this.$toast({ message: '更新成功！', duration: 1000 })
          }, 100)
        }, e => {
          this.$toast(e.message)
        })
      }
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view{
  background: #ffffff;
  width: 100%;
  height: 100%;
  color: #A4A9B2;
  padding-top: 60px;
}
.van-cell:not(:last-child):after {
  border: none;
}
/deep/ .van-field__control {
  color: #A4A9B2;
}
.form{
  color: #A4A9B2;
  font-size: 32px;
  width: 600px;
  // height: 113px;
  margin: 0 auto;
  padding-left: 0px;
  // line-height: 110px;
  @include px1border;
  + .form {
    margin-top: 25px;
  }
}
.btn-div{
  text-align: center;
  margin-top: 288px;
}
.btn{
  width: 532px;
  height: 80px;
  font-size: 32px;
  background-color: $primary-web;
  border: none;
}
</style>
